import React, { useEffect, useState } from "react";
import { Text, View } from "react-native";

// function FunctionView (){
//     return (
//         <View style={{width:'100%',height:200,backgroundColor:'red'}}>
//             <Text style={{fontSize:20,color:'white'}}>
//                 Hello React native
//             </Text>
//         </View>
//     );
// }
// export default FunctionView;


//第二种写法：箭头函数
// const FunctionView = () => {
//     return (
//         <View style={{width:'100%',height:200,backgroundColor:'red'}}>
//             <Text style={{fontSize:20,color:'white'}}>
//                 Hello React native
//             </Text>
//         </View>
//     );
// }
// export default FunctionView;

// 第3种写



export default (props) => {

    const { name, age, level } = props;
    const [adress, setAddress] = useState("河南省信阳市");
   
   

    useEffect(()=>{
        setTimeout(()=>{
            setAddress("浙江省杭州市");
            setHobby("学习编程")
        },2000);
    },[]);//如何坚听的对象数组中【】为空时，则是组件完成渲染则开始回调


    //每次【adress】的值修改会触发下面方法，【】中可以添加多个
    useEffect(()=>{
        console.log(`adress=${adress},hobby=${hobby}`);
    },[adress,hobby]);

    return (
        <View style={{ width: '100%', height: 200, backgroundColor: 'red' }}>
            
            <Text style={{ fontSize: 20, color: 'white' }}>
                {`name=${name},age=${age},level=${level}`}
            </Text>

            <Text style={{ fontSize: 20, color: 'yellow' }}>
                {`adress=${adress},hobby=${hobby}`}
            </Text>
        </View>
    );

};